<template>
	<com-popup ref="popup" title="我的地址" :action="false" @close="emits('close')">
	    <view v-if="list.length > 0" class="gy-address-select">

			<view v-if="tip.show" class="gy-address-select-tip" :class="[tip.visible ? 'show' : 'hide']">
			    <view class="gy-address-select-tip-text">提示：左滑可编辑地址信息</view>
			    <view class="gy-address-select-tip-close gy_icon_close" @click.stop="closeTipFn"></view>
			</view>

	        <view class="gy-address-select-list">
	            <view
					class="gy-address-select-item gy-custom-card"
					:class="{selected: props.address && props.address?.id === item.id}"
					v-for="(item,index) in list"
					:key="index"
					@click.stop="selectFn(item)">
					<com-swipe-cell :right-width="125">
					    <view class="gy-address-info">
					        <view class="gy-address-user">{{ item.person }}<text>{{ item.mobile }}</text></view>
					        <view class="gy-address-details">{{ item.address }}</view>
					    </view>
					    <template #right>
					        <view class="gy-swipe-cell-btns">
					            <view @click.stop="toAddOrEditFn(item)">编辑</view>
					        </view>
					    </template>
					</com-swipe-cell>
	            </view>
	        </view>

			<view class="gy-address-create" @click.stop="toAddOrEditFn">
			    <view class="gy-address-create-icon">
			        <com-icon name="gy_icon_plus" />
			    </view>
			    添加新地址
			</view>

	    </view>

		<com-empty
			v-if="list.length === 0 && !loading"
			type="address"
			showBtn
			btnText="添加地址"
			btnIcon="gy_icon_plus"
			text="暂无地址，请添加地址"
			@confirm="toAddOrEditFn" />

		<view v-if="loading" class="gy-address-select-loading">
			<image :src="proxy.utils.image.fullPath('008e97b1c58bb868035f8023444b245fae4691b42264e6385c241asjlkfk123.gif')"></image>
		</view>

	</com-popup>
</template>

<script lang="ts" setup>

	import {
		ref,
		onMounted,
		getCurrentInstance
	} from "vue";

	import {
		getAddressList
	} from "@/request/apis/address.js";

	const { proxy }: any = getCurrentInstance();

	const popup: any = ref(null);

	const emits = defineEmits(["select", "list", "close"]);

	const props = defineProps({
	    address: {
	    	type: Object
	    }
	});

	const loading = ref(true);

	const tip = ref({
	    show: true,
	    visible: true
	});

	const list = ref([]);

	function closeTipFn(){
	    tip.value.visible = false;
	    setTimeout(() => {
	        tip.value.show = false;
	    }, 500);
	}

	function toAddOrEditFn(item?: any){
	    proxy.utils.uni.route.go("/pages-personal/my-delivery-address/add-or-edit?id=" + (item && item.id ? item.id : ""));
		popup.value?.closeFn();
	}

	function selectFn(item: any){
		emits("select", item);
		popup.value?.closeFn();
	}

	function initFn(){
		getAddressList().then((res: any) => {
			loading.value = false;
			list.value = res;
			if(list.value.length > 0 && !props.address){
				emits("select", list.value[0]);
			}
		}).catch(() => {
			loading.value = false;
			list.value = [];
		})
	}

	onMounted(() => {
		initFn();
	});

	defineExpose({
		initFn: initFn,
		closeFn: () => {
			popup.value?.closeFn();
		}
	});

</script>

<style lang="scss" scoped>
	.gy-address-select-loading{
		height: 500rpx;
		@include flex-center-center;
		padding-bottom: 100rpx;
		image{
			display: block;
			width: 80rpx;
			height: 80rpx;
		}
	}
	.gy-address-select{
		.gy-address-select-tip{
		    width: 100%;
		    height: 0rpx;
		    @include flex-center-center;
		    color: var(--gy-color-warning);
		    background: #fdf6ec;
		    overflow: hidden;
		    padding: 0 var(--gy-gap);
		    .gy-address-select-tip-text{
		        width: calc(100% - 50rpx);
		        padding-right: var(--gy-gap);
		        font-size: var(--gy-font-size-base);
		    }
		    .gy-address-select-tip-close{
		        @include flex-center-center;
		        width: 50rpx;
		        height: 50rpx;
		        font-size: var(--gy-font-size-small);
		    }
		}
		.gy-address-select-tip.show{
			animation: gy-address-select-tip-show .4s;
			animation-fill-mode: forwards;
		}
		.gy-address-select-tip.hide{
			animation: gy-address-select-tip-hide .4s;
			animation-fill-mode: forwards;
		}
		@keyframes gy-address-select-tip-show {
			from {
		        opacity: 0;
				height: 0rpx;
			}
			to {
		        opacity: 1;
				height: 70rpx;
			}
		}
		@keyframes gy-address-select-tip-hide {
			from {
				opacity: 1;
				height: 70rpx;
			}
			to {
				opacity: 0;
				height: 0rpx;
			}
		}
		.gy-address-select-list{
			max-height: 600rpx;
			overflow: auto;
			background-color: var(--gy-page-bg-color);

			.gy-address-select-item{
				padding: 0;
				.gy-address-info{
					padding: var(--gy-gap);
					.gy-address-user{
						font-size: var(--gy-font-size-medium);
						font-weight: bold;
						text{
							font-size: var(--gy-font-size-base);
							color: var(--gy-text-color-secondary);
							margin-left: 20rpx;
							font-weight: 400;
						}
					}
					.gy-address-details{
						margin-top: 10rpx;
						font-size: var(--gy-font-size-base);
						color: var(--gy-text-color-secondary);
					}
				}
				.gy-swipe-cell-btns{
				    width: 128rpx;
				    height: 100%;
				    @include flex-between-center;
				    background-color: var(--gy-color-primary);
				    border-radius: var(--gy-border-radius-large);
				    view{
				        width: 128rpx;
				        height: 100%;
				        @include flex-center-center;
				        color: #ffffff;
				        background-color: var(--gy-color-primary);
				        font-size: var(--gy-font-size-base);
				        border-radius: var(--gy-border-radius-large);
						background-color: var(--gy-color-primary);
				    }
				    view:active{
				        opacity: 0.8;
				    }
				}
			}

		}
		.gy-address-select-empty{
			padding-bottom: 100rpx;
		}
		.gy-address-create{
		    height: 140rpx;
		    padding: 0 var(--gy-gap);
		    @include flex-center-center;
		    .gy-address-create-icon{
		        width: 70rpx;
		        height: 70rpx;
		        @include flex-center-center;
		        background: rgba(236,236,236,0.69);
		        border-radius: 50%;
		        margin-right: 20rpx;
		    }
		}
		.gy-address-create:active{
		    background-color: var(--gy-card-line-color);
		}
	}
</style>
